<template>
	<view :style="viewColor">
		<view class="navTabBox">
			<view class="longTab">
				<view class="tab-item" :class="{'on':status == -1}" @click="clickStatus(-1)"><text>全部好货</text></view>
				<view class="tab-item" :class="{'on':status == 1}" @click="clickStatus(1)"><text>审核成功</text></view>
				<view class="tab-item" :class="{'on':status == 2}" @click="clickStatus(2)"><text>审核失败</text></view>
				<view class="tab-item" :class="{'on':status == 0}" @click="clickStatus(0)"><text>待审核</text></view>
			</view>
		</view>
		<view class="list">
			<view v-for="(item, index) in list" :key="index" class="item">
				<view class="item-info">
					<view class="item-info-thumb">
						<image :src="item.thumb" />
						<view class="user_product_label" v-if="item.type == 1"><image :src=" domain + '/uploads/default/20230717/1ac3fae9d7fa8d3717ce523395093bd8.png'" mode="widthFix"/></view>
						<view class="user_product_label" v-if="item.type == 0"><image :src=" domain + '/uploads/default/20230717/fa672abf3a579b329d0abd354aac8436.png'" mode="widthFix"/></view>
					</view>
					<view class="item-introduce">
						<view class="item-title">{{item.title}}</view>
						<view class="item-keywords line2">{{item.keywords}}</view>
						<view class="item-type" v-if="item.status == 1">{{item.show_name}}状态</view>
						<view class="item-price">¥{{item.price}}
						<!-- <span v-if="item.original_price" class="item-original-price">¥{{item.original_price}}</span> -->
						</view>
					</view>
				</view>
				<view class="item-button">
					<view class="item-message" :class="item.status == 1 ? 'item-status-success' : (item.status == 2 ? 'item-status-error' : 'item-status-warning')">{{item.status_name}}<span v-if="item.status == 2">:{{item.message}}</span></view>
					
					<view class="item-button-show" @click="setStatus(index, 1)" v-if="item.status == 1 && !item.is_show">上架</view>
					<view class="item-button-show" @click="setStatus(index, 0)" v-if="item.status == 1 && item.is_show">下架</view>
					<view class="item-button-show" v-if="item.status" @click="editProduct(item.id)">编辑</view>
					<view class="item-button-show" @click="productPromotion(item)" v-if="item.status == 1">首页推广</view>
					<view class="item-button-show item-button-more" @click="getUserProductDetail(item.id)">更多</view>
				</view>
			</view>
		</view>
		<view class="add_btn">
			<view class="add_button font-size36-bold" @click="addProduct()">上架好货</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<paymentData :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun" :payTitle="'推广到期时间'" :payGroupName="pay_group_name" :userCount="userCount" :unit="'天'" :rechargeType="recharge_type" :extends="payment_data_extends"></paymentData>
	</view>
</template>

<script>
	import {
		getUserProductList,
		setUserProductStatus
	} from "@/api/user_product"
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import parser from "@/components/jyf-parser/jyf-parser";
	import authorize from '@/components/Authorize';
	import paymentData from '@/components/payDataList';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			"jyf-parser": parser,
			authorize,
			paymentData
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				page: 1,
				limit: 10,
				is_loading: true,
				list: [],
				status: -1,
				payMode: [{
					name: '微信支付',
					icon: 'icon-weixinzhifu',
					value: 'wechat',
					title: '微信快捷支付',
					payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
					name: '支付宝支付',
					icon: 'icon-zhifubao',
					value: 'alipay',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					,
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					}
				],
				pay_close: false,
				pay_group_name: 'gpbhbd',
				userCount: '',
				recharge_type: 11,
				payment_data_extends: {}
			};
		},
		beforeDestroy() {
		},
		computed: {...configMap({sys_intention_agree:''},mapGetters(['isLogin','viewColor','keyColor']))
		},
		onLoad(options) {
			if (this.isLogin) {
				this.getLst();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onShow() {},
		onReady() {},
		methods: {
			getLst() {
				let that = this;
				let data = {
					is_my: 1,
					page: that.page,
					limit: that.limit,
					status: that.status == -1 ? '' : that.status
				}
				if(!that.is_loading) return false;
				getUserProductList(data).then(res=>{
					that.list = that.list.concat(res.data.list);
					that.page++;
					that.is_loading = res.data.list.length >= that.limit;
				}).catch(err=>{
					
				})
			},
			clickStatus(status)
			{
				let that = this;
				that.status = status;
				that.page = 1;
				that.is_loading = true;
				that.list = [];
				that.getLst();
			},
			editProduct(id)
			{
				this.$util.Tips('/pages/extends/user_product/create_user_product?id=' + id);
			},
			getUserProductDetail(id)
			{
				this.$util.Tips('/pages/extends/user_product/detail?type=1&id=' + id);
			},
			setStatus(index, status)
			{
				let data = this.list[index];
				setUserProductStatus(this.list[index].id, {status}).then(res=>{
					if(res.status == 200) {
						data.is_show = status;
						//that.$set(that.list, index, data);
						this.$util.Tips({title:res.message})
					}else{
						this.$util.Tips({title:res.message})
					}
				}).catch(err=>{
					this.$util.Tips({title:err})
				})
			},
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			addProduct() {
				this.$util.Tips('/pages/extends/user_product/create_user_product')
			},
			productPromotion(data) {
				this.payment_data_extends = {id: data.id}
				this.userCount = data.home_promo_exp
				this.pay_close = true;
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose: function() {
				this.pay_close = false;
			},
			payOrderSuccess: function() {
			}
		},
		onReachBottom() {
			this.getLst();
		}
	}
</script>

<style scoped lang="scss">
.navTabBox{
		background: #fff;
		height: 90rpx;
	}
	.longTab{
		display: flex;
		text-align: center;
		padding: 30rpx 0;
	}
	.tab-item{
		width: 50%;
		display: inline-block;
		line-height: 44rpx;
		position: relative;
		text{
			position: relative;
			display: inline-block;
			font-size: 32rpx;
			font-weight: 400;
			color: #1C211D;
		}
	}
	.tab-item.on{
		color: var(--view-theme);
		text{
			font-weight: 500;
		}
		&:before{
			content: "";
			display: inline-block;
			width: 124rpx;
			height: 22rpx;
			background-color: var(--view-theme);
			position: absolute;
			left: 18%;
			bottom: 0;
		}
	}
.list {
	padding: 30rpx;
	.item {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}
	.item-info {
		display: flex;
		flex-wrap: nowrap;
		// border-bottom: 1px solid #ccc;
		padding-bottom: 10px;
		.item-info-thumb {
			width: 208rpx;
			border-radius: 10rpx;
			position: relative;
			image {
				width: 208rpx;
				height: 208rpx;
				border-radius: 10rpx;
			}
			.user_product_label {
				position: absolute;
				top: 0;
				left: 0;
				image {
					width: 83rpx;
				}
			}
		}
		.item-introduce{
			margin-left: 20rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			.item-title {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				line-height: 45rpx;
			}
			.item-keywords {
				margin-top: 12rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #A9A9A9;
				line-height: 24rpx;
			}
			.item-type {
				width: fit-content;
				background-color: #f0ad4e;
				border-color: #eea236;
				padding: 5rpx 10rpx;
				margin-top: 12rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #fff;
				line-height: 24rpx;
			}
			.item-price {
				font-size: 24rpx;
				font-weight: 500;
				color: #F50402;
				line-height: 34rpx;
				margin-top: 18rpx;
				// .item-original-price{
				// 	margin-left: 20rpx;
				// 	color: #ccc;
				// 	text-decoration: line-through;
				// }
			}
		}
	}
	.item-message{
		font-size: 26rpx;
		font-weight: 400;
		color: #F50402;
		line-height: 26rpx;
		margin-right: auto;
	}
	.item-button {
		display: flex;
		padding-top: 10rpx;
		align-items: center;
		.item-button-show, .item-button-show2 {
			display: inline-block;
			padding: 10rpx 20rpx;
			background: #FFE103;
			border-radius: 30rpx;
			margin-left: 10rpx;
			white-space: nowrap;
			font-size: 24rpx;
			font-weight: 500;
			color: #1C211D;
			line-height: 34rpx;
			border: 1rpx solid #FFE103;
		}
		.item-button-more {
			border-radius: 30rpx;
			border: 1rpx solid #1C211D;
			background-color: #fff;
		}
		.item-status-success {
			color: #5cb85c;
		}
		.item-status-error {
			color: red;
		}
		.item-status-warning {
			color: #f0ad4e;
		}
	}
}
.add_btn {
	position: fixed;
	width: 100%;
	height: 160rpx;
	left: 0;
	bottom: 0;
	.add_button {
		width: fit-content;
		background-color: #FFE60F;
		color: #000;
		padding: 20rpx 100rpx;
		border-radius: 50rpx;
		z-index: 3;
		margin: 0 auto;
	}
}

</style>